<template>
  <div class="position-absolute">
    <div class="preview-wrapper">
      <div class="preview-phone">
        <div class="preview-title">
          {{ pageData.title }}
        </div>
        <div class="iframe-wrapper">
          <iframe
            :src="`http://${localIp}:8089/#/`"
            width="375"
            class="iframe-placeholder"
            :height="pageData.props.height ? parseInt(pageData.props.height) + 5 : '560'"
            frameBorder="0"
          >
          </iframe>
        </div>
      </div>
    </div>
    <el-drawer
      custom-class="drawer"
      title="设置面板"
      v-model="drawer"
      direction="rtl"
      destroy-on-close
      @closed="handleClose"
    >
      <div class="px-2">
        <div class="flex align-center">
          <span class="leble">扫码预览:</span>
          <canvas class="qrcode" id="qrcode"></canvas>
        </div>
        <div class="flex align-center mt-2">
          <span class="leble">上传封面:</span>
          <Uploade :isPreview="true" @onChangeFile="onChangeFile">
            <img
              class="avatar"
              :src="
                (pageData.setting && pageData.setting.shareImg) ||
                `http://${localIp}:7878/upload/LOGO.png`
              "
            />
          </Uploade>
        </div>
        <div class="flex align-center mt-2">
          <span class="leble">标题:</span>
          <el-input
            class="flex-1"
            v-model.trim="title"
            placeholder="请输入标题"
          ></el-input>
        </div>
        <div class="flex align-center mt-2">
          <span class="leble">副标题:</span>
          <el-input
            class="flex-1 align-center"
            v-model.trim="subTitle"
            placeholder="请输入副标题"
          ></el-input>
        </div>
        <el-row class="mt-2" justify="center">
          <el-button type="primary" round @click="pushHandler()">发布</el-button>
          <el-button type="success" round @click="saveHandler()">保存</el-button>
          <el-button type="info" round @click="drawer = false">取消</el-button>
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, onMounted, nextTick } from "vue";
import Uploade from "@/components/Uploade/index.vue";
import { useStore } from "vuex";
import { IGlobalDataProps } from "@/store/index.ts";
import useAppInstance from "@/hooks/useAppInstance";
import { IPageProps } from "@/store/modules/editor.ts";
import QRCode from "qrcode";
import { UPDATE_PAGE_SETTING, UPDATE_PAGE } from "@/utils/Const";
import { cloneDeep } from "lodash-es";
export default defineComponent({
  components: {
    Uploade,
  },
  setup(props, context) {
    const store = useStore<IGlobalDataProps>();
    let components = computed(() => store.state.editor.components);
    const { globalFunc } = useAppInstance();
    const drawer = ref<boolean>(true);
    const title = ref<string>("");
    const subTitle = ref<string>("");
    let localIp = ref(window["localIp"]);
    let pageData = computed<IPageProps>(() => store.state.editor.page);
    title.value = pageData.value.title as string;
    subTitle.value = pageData.value.desc as string;
    const handleClose = () => {
      context.emit("changePreview");
    };
    let onChangeFile = (imageSrc: string) => {
      store.commit(`editor/${UPDATE_PAGE_SETTING}`, {
        key: "shareImg",
        v: imageSrc,
      });
    };

    // 渲染主页面样式
    let getPageStyle = computed(() => {
      let styles = cloneDeep(pageData.value.props);
      styles["backgroundImage"] = `url(${styles["backgroundImage"]})`;
      return styles;
    });

    // 生成二维码
    let generateQRCode = (id: string, url: string) => {
      let el = document.getElementById(id) as HTMLCanvasElement;
      QRCode.toCanvas(el, url, {
        width: 90,
      });
    };
    // 验证
    let validation = () => {
      if (!title.value) {
        globalFunc.$message.warning({
          message: "标题不能为空",
          type: "warning",
        });
        return false;
      }
      if (!subTitle.value) {
        globalFunc.$message.warning({
          message: "副标题不能为空",
          type: "warning",
        });
        return false;
      }
      store.commit(`editor/${UPDATE_PAGE}`, {
        key: "title",
        v: title.value,
      });
      store.commit(`editor/${UPDATE_PAGE}`, {
        key: "desc",
        v: subTitle.value,
      });
      return true;
    };

    let pushHandler = () => {
      if (validation()) {
        drawer.value = false;
        context.emit("pushHandler");
      }
    };

    let saveHandler = () => {
      if (validation()) {
        drawer.value = false;
        context.emit("saveHandler");
      }
    };

    onMounted(async () => {
      await nextTick();
      generateQRCode("qrcode", `http://${localIp.value}:8089/#/`);
    });

    return {
      drawer,
      handleClose,
      title,
      subTitle,
      onChangeFile,
      pageData,
      pushHandler,
      saveHandler,
      components,
      getPageStyle,
      localIp,
    };
  },
});
</script>
<style lang="scss" scoped>
.qrcode {
  width: 90px;
  height: 90px;
  border: 1px #dddddd dashed;
  border-radius: 10px;
}
.leble {
  width: 90px;
}
.avatar {
  width: 130px;
  height: 130px;
  display: block;
}
.tip {
  font-weight: bold;
  font-size: 18px;
  color: #ccc;
  height: 130px;
  line-height: 130px;
}
.tip:hover {
  color: #409eff;
}
.preview-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: calc(100% - 400px);
  height: 100%;
  z-index: 9999;
}
.preview-phone {
  width: 430px;
  height: 870px;
  padding: 60px 28px;
  box-sizing: border-box;
  position: relative;
  background: url("~@/assets/images/phone-back.png") no-repeat;
  background-size: cover;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.preview-title {
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-weight: bold;
}
.iframe-wrapper {
  width: 100%;
  height: 706px;
  overflow-x: hidden;
  overflow-y: auto;
}
.iframe-placeholder {
  background: url("~@/assets/images/loading.svg") 50% 50% no-repeat;
  background-size: 50px;
}
.h-text,
.h-image,
.h-shape {
  position: absolute !important;
}
</style>

<style lang="scss">
.drawer {
  width: 400px !important;
  box-sizing: border-box;
  .el-drawer__header {
    color: #000000;
    font-weight: bold;
    padding: 10px;
    border-bottom: 1px solid #eeeeee;
  }
}
</style>
